import React from 'react';
import { Breadcrumb, Table, Card, Typography } from 'antd';
import styles from './AssetManagement.module.css';

const { Text } = Typography;

function AssetManagement() {
  // 表格列配置
  const columns = [
    {
      title: '时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '收支类型',
      dataIndex: 'type',
      key: 'type',
      render: (text) => (
        <Text style={{ color: text === '收入' ? '#52c41a' : '#f5222d' }}>
          {text}
        </Text>
      ),
    },
    {
      title: '金额（元）',
      dataIndex: 'amount',
      key: 'amount',
      render: (text) => (
        <Text>
          {text > 0 ? `+${text}` : text}
        </Text>
      ),
    },
    {
      title: '账单类型',
      dataIndex: 'billType',
      key: 'billType',
    },
    {
      title: '余额（元）',
      dataIndex: 'balance',
      key: 'balance',
      render: (text) => (
        <Text>
          +{text}
        </Text>
      ),
    },
    {
      title: '订单编号',
      dataIndex: 'orderNo',
      key: 'orderNo',
    },
    {
      title: '交易摘要',
      dataIndex: 'summary',
      key: 'summary',
    },
  ];

  // 模拟数据
  const data = [
    {
      key: '1',
      time: '2024.12.13 13:00:00',
      type: '收入',
      amount: 300,
      billType: '会员卡充值',
      balance: 59898,
      orderNo: '2489035834095',
      summary: '小白鞋清洗',
    },
    // ... 其他数据
  ];

  return (
    <div className={styles.container}>
      <Breadcrumb className={styles.breadcrumb}>
        <Breadcrumb.Item>当前位置：资产</Breadcrumb.Item>
      </Breadcrumb>

      {/* 店铺余额卡片 */}
      <Card title="店铺余额" className={styles.balanceCard}>
        <div className={styles.balanceWrapper}>
          <Text>店铺余额：（元）</Text>
          <Text className={styles.balanceAmount}>199, 500</Text>
        </div>
      </Card>

      {/* 交易记录表格 */}
      <Card title="交易记录" className={styles.transactionCard}>
        <Table 
          columns={columns} 
          dataSource={data} 
          pagination={{ 
            total: 50,
            pageSize: 10,
            showTotal: (total) => `共 ${total} 条`
          }}
        />
      </Card>
    </div>
  );
}

export default AssetManagement;
